<!-- Search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  (onSearch)="queryData($event)"
  (onReset)="resetData($event)"
>
</app-search-bar>

<nz-card class="m-t-4">
  <div class="oprea-wrap">
    <button
      nz-button
      nzType="primary"
      (click)="showMakeupModal(0)"
    >撤回加价券</button>
  </div>

  <div class="pagination-wrap-position table-wrap p-t-10">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
    >
      <thead>
        <tr>
          <th
            nzLeft
            nzWidth="80px"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th nzAlign="center" nzWidth="150px">状态</th>
          <th nzAlign="center" nzWidth="120px">用户ID</th>
          <th nzAlign="center" nzWidth="130px">用户昵称</th>
          <th nzAlign="center" nzWidth="120px">用户联系方式</th>
          <th nzAlign="center" nzWidth="180px">加价券ID</th>
          <th nzAlign="center" nzWidth="180px">加价券名称</th>
          <th nzAlign="center" nzWidth="170px">领取时间</th>
          <th nzAlign="center" nzWidth="170px">使用时间</th>
          <th nzAlign="center" nzWidth="170px">过期时间</th>
          <th nzAlign="center" nzWidth="180px">关联订单号</th>
          <th nzAlign="center" nzWidth="160px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <td
            nzLeft
            [nzDisabled]="data.status !== 1"
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="onItemChecked(data.id, $event)"
          ></td>
          <!-- 状态 -->
          <td nzAlign="center">
            <span
              *ngIf="data.status"
              [ngStyle]="{'color': data.status | userCouponStatus: 'color'}">
              {{ data.status | userCouponStatus: 'label' }}
            </span>
            <ng-container *ngIf="data.status === 5">
              <button
                nz-button
                nzType="link"
                nzSize="small"
                (click)="viewReason(tplContent)"
              >查看</button>
              <ng-template #tplContent let-params>
                <nz-form-item>
                  <nz-form-label [nzSpan]="6" nzRequired>撤回原因</nz-form-label>
                  <nz-form-control [nzSpan]="18">{{ data.remark || '-' }}</nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-label [nzSpan]="6" nzRequired>操作人</nz-form-label>
                  <nz-form-control [nzSpan]="18">{{ data.recallName || '-' }}</nz-form-control>
                </nz-form-item>
              </ng-template>
            </ng-container>
          </td>

          <!-- 用户ID -->
          <td nzAlign="center">
            <a
              nz-button
              nzType="link"
              target="_blank"
              [routerLink]="['/customer/tabs', data.realUserId, 0]"
            >{{ data.realUserId }}</a>
          </td>

          <!-- 用户昵称 -->
          <td nzAlign="center">{{ data.nickname || '-' }}</td>

          <!-- 用户联系方式 -->
          <td nzAlign="center">{{ data.phone || '-' }}</td>

          <!-- 加价券ID -->
          <td nzAlign="center">{{ data.couponNo }}</td>

          <!-- 加价券名称 -->
          <td nzAlign="center">{{ data.couponName || '-' }}</td>

          <!-- 领取时间 -->
          <td nzAlign="center">{{ (data.getTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>

          <!-- 使用时间 -->
          <td nzAlign="center">{{ (data.useTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>

          <!-- 过期时间 -->
          <td nzAlign="center">{{ (data.endTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>

          <!-- 关联订单号 -->
          <td nzAlign="center">{{ data.orderNum || '-' }}</td>

          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="link"
              [disabled]="data.status !== 1"
              (click)="showMakeupModal(1, data)"
            >撤回加价券</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 撤回加价券 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  [nzTitle]="'撤回加价券'"
  (nzOnCancel)="isVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzRequired>撤回原因</nz-form-label>
          <nz-form-control [nzSpan]="20" nzErrorTip="请输入撤回原因，仅内部查看!">
            <nz-textarea-count [nzMaxCharacterCount]="50">
              <textarea
                rows="4"
                maxlength="50"
                nz-input
                placeholder="请输入撤回原因，仅内部查看"
                formControlName="remark"
              ></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="submitLoading" (click)="submitForm()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- S 撤回加价券 -->